<template>
  <div class="error">
    <div class="img">
      <img :src="image" />
    </div>
    <div class="content">
      <h1>{{ title }}</h1>
      <div class="desc">{{ description }}</div>
      <div class="action">
        <a-button type="primary" @click="backHome">返回首页</a-button>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { Router, useRouter } from 'vue-router'
import { Button } from 'ant-design-vue'
export default defineComponent({
  props: {
    title: {
      type: String,
      required: true,
    },
    image: {
      type: String,
      required: true,
    },
    description: {
      type: String,
      required: true,
    },
  },
  components: { AButton: Button },
  setup() {
    const router: Router = useRouter()

    const backHome = () => {
      router.push('/')
    }
    return {
      backHome,
    }
  },
})
</script>
<style lang="less" scoped>
.error {
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 200px;
  .img {
    padding-right: 52px;
    zoom: 1;
    img {
      max-width: 430px;
    }
  }
  .content {
    h1 {
      color: #434e59;
      font-size: 72px;
      font-weight: 600;
      line-height: 72px;
      margin-bottom: 24px;
    }
    .desc {
      font-size: 20px;
      line-height: 28px;
      margin-bottom: 16px;
      color: #bfbfbf;
    }
  }
}
</style>
